<template>
    <div class="content-right">
        <Card shadow>
                <p class="examination-room-info">
                    <span>考场名称：{{eRoomName}}</span>
                    <span>考场状态：{{status}}</span>
                    <span>当前参考人数：{{personnelNum}}人</span>
                </p>
                <router-link :to="{name:'examination-set'}">
                    <i-button type="default" icon="ios-arrow-left" class="back-examinee-btn">返回考场列表</i-button>
                </router-link>
                <router-link v-if="status=='考试中'||status=='未开始'" :to="{name:'examinee-into',query:{id:this.$route.query.id}}">
                    <i-button type="default" icon="ios-plus-empty">考生导入</i-button>
                </router-link>
                <!-- form表单 -->
                <form @keyup.enter="search" ref="formSearch" class="examinee-search-form">
                    <Row :gutter="16">
                        <Col span="6">
                            <div>
                                <Input v-model="formSearch.key" placeholder="请输入考生ID/姓名/身份证号/电话号码"></Input>
                            </div>
                        </Col>
                        <Col span="4">
                            <div>
                                <i-select v-model="formSearch.sex" clearable placeholder="用户性别">
                                    <i-option value="1">男</i-option>
                                    <i-option value="0">女</i-option>
                                </i-select>    
                            </div>
                        </Col>
                        <Col span="4">
                            <div>
                                <i-select v-model="formSearch.age" clearable placeholder="用户年龄">
                                    <i-option v-for="v in ageList" :key="v.value" :value="v.value">{{v.text}}</i-option>
                                </i-select> 
                            </div>
                        </Col>
                        <Col span="6">
                            <div><i-button @click="search" type="primary">搜索</i-button></div>
                        </Col>
                    </Row>
                </form>
                <!-- table -->
                <div class="examinee-search-table">
                    <Table border ref="selection" :columns="columns4" :data="examineeList"  @on-selection-change="selectMore"></Table>
                    <Checkbox @on-change="handleSelectAll" v-model="checkAll">全选</Checkbox>
                    <Button @click="instance()">移出考场</Button>
                    <Button>发送信息</Button>
                    <Button @click="exportData">导出数据</Button>
                    <Page :total="total" show-total show-elevator class="tablePage" :current="page" @on-change="changePage" :page-size='10'></Page>
                </div>
        </Card>
    </div>
</template>
<script>
import Cookies from 'js-cookie';
import $store from '@/store/index.js';
import Vue from 'vue';
var $vue=new Vue();
export default {
    data() {
        return {
            //考生列表
            examineeList:[],
            //当前页数
            page:1,
            //分页总数
            total:0,
            //搜索表单
            formSearch:{
                key:'',

                sex:'',
                age:''
            },
            //年龄
            ageList: [
                {value:'0,19',text:'19岁及以下'},
                {value:'20,29',text:'20~29岁'},
                {value:'30,39',text:'30~39岁'},
                {value:'40,49',text:'40~49岁'},
                {value:'50,99',text:'50岁及以上'}
            ],
            //最小年龄
            ageGt:0,
            //最大年龄
            ageLt:0,
            //全选checkbox
            checkAll:false,
            //选择到的数据
            Something:[],
            //考场名称
            eRoomName:'',
            //考场状态
            status:'',
            //当前参考人数
            personnelNum:0,
            // table
            columns4: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: 'Id',
                    key: 'Id',
                    align: 'center'                 
                },
                {
                    title: '姓名',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '身份证号',
                    key: 'idcard',
                    align: 'center',
                    render:(h,params)=>{
                        var num=params.row.idcard;
                        return h('div',num=num.slice(0,3)+'****'+num.slice(num.length-4,))
                    }
                },
                {
                    title: '绑定手机',
                    key: 'phone',
                    align: 'center',
                    render:(h,params)=>{
                        var num=params.row.phone;
                        return h('div',num=num.slice(0,3)+'****'+num.slice(num.length-4,))
                    }
                },
                {
                    title: '性别',
                    key: 'sex',
                    align: 'center',
                    render:(h,params)=>{
                        return h('div',params.row.sex?'男':'女')
                    }
                },
                {
                    title: '年龄',
                    key: 'age',
                    align: 'center'
                },
                {
                    title: '操作',
                    key:'action',
                    align:'center',
                    render:(h,params) => {
                        return h('div',{
                        },[
                                h('Button',{
                                    props:{
                                        type:'error',
                                        icon:"ios-trash-outline",
                                    },
                                    style:{
                                        maginRight:'5px'
                                    },
                                    on:{
                                        click:()=>{
                                            this.$Modal.confirm({
                                                content: '<h4>是否确认将该考生移出考场，考生被移出后，考生将无法查看及参加本次考试。</h4>',
                                                onOk: () => {
                                                    var that=this;
                                                    var eRoomId=this.$route.query.id;
                                                    var examineeId=params.row.Id;
                                                    this.axios({
                                                        method:'post',
                                                        url:that.$store.state.app.globalUrl+'/admin/TestPersonnel/del',
                                                        data:{
                                                            examineeId:examineeId,
                                                            examinationRoomId:eRoomId
                                                        }
                                                    }).then(function(res){
                                                        if(res.data.msg=='操作成功'){
                                                            that.$Message.success('移出成功');
                                                            that.loadData();
                                                            that.eRoomInfo();
                                                        }else{
                                                            that.$Message.success('移出失败');
                                                        }
                                                    })
                                                },
                                            });
                                        }
                                    }
                                },'移出考场')
                            ])
                    }
                }
            ],
        }
    },
    //页面加载之前
    created:function(){
        this.eRoomInfo();
        this.loadData();
    },
    //监听
    watch:{
        'formSearch.age'(n,o){
            var agearr=this.formSearch.age.split(',');
            this.ageGt=parseInt(agearr[0]);
            this.ageLt=parseInt(agearr[1]);
        }
    },
    methods: {
        //获取考场信息
        eRoomInfo(){
            var that=this;
            var id=this.$route.query.id;
            this.axios({
                method:'get',
                url:that.$store.state.app.globalUrl+'/admin/ExaminationRoom/getDetail?id='+id,
                data:{
                }
            }).then(function(res){
                that.status=res.data.data.examinationRoom.examStatusStr;
                that.personnelNum=res.data.data.examinationRoom.testPersonnelNum;
                that.eRoomName=res.data.data.examinationRoom.name;
            })
        },
        // table全选
        handleSelectAll() {
            this.$refs.selection.selectAll(this.checkAll);
        },
        //批量移出
        instance(){
            if(this.Something.length>0){
                var that=this;
                var examineeId=this.Something;
                var exRoomId=this.$route.query.id;
                this.$Modal.confirm({
                    content: '<h4>是否确认批量将选中考生移出考场？</h4>',
                    onOk: () => {
                        this.axios({
                            method:'post',
                            url:that.$store.state.app.globalUrl+'/admin/TestPersonnel/del',
                            data:{
                                examineeId:examineeId.join(','),
                                examinationRoomId:exRoomId
                            }
                        }).then(function(res){
                            if(res.data.msg=='操作成功'){
                                that.$Message.success('移出成功');
                                that.eRoomInfo();
                                that.loadData();
                                that.checkAll=false;
                                that.Something=[];
                            }else{
                                that.$Message.success('移出失败');
                            }
                        })
                    }
                });
            }else{
                this.$Message.error('未选择考生');
            }
        },
        // 考生数据加载
        loadData(){
            var that=this;
            //考场ID
            var id=this.$route.query.id;
            //当前页数
            var pageNow=this.page;
            //关键字
            var key=this.formSearch.key;
            //性别
            var sex=this.formSearch.sex;
            //最小年龄
            var ageGt=this.ageGt;
            //最大年龄
            var ageLt=this.ageLt;
            this.axios({
                methods:'get',
                url:that.$store.state.app.globalUrl+'/admin/Examinee/eRoomExamineeList?size=10&eRoomId='+id+'&page='+pageNow+(key==''||key==undefined?'':'&keywords='+key)+(sex==''||sex==undefined?'':'&sex='+sex)+(ageGt==''||ageGt==undefined||isNaN(ageGt)?'':'&ageGt='+ageGt)+(ageLt==''||ageLt==undefined||isNaN(ageLt)?'':'&ageLt='+ageLt),
                data:{

                }
            }).then(function(res){
                that.examineeList=res.data.data.list;
                that.total=res.data.data.count;

            })
        },
        //翻页
        changePage(num){
            this.page=num;
            this.loadData();
            this.Something=[];
            this.checkAll=false;
        },
        //获取选择到的ID
        selectMore(num){
            this.Something=[];
            num.forEach((item,index)=>{
                this.Something.push(item.Id)
            });
            //全选
            if(this.Something.length==this.examineeList.length){
                this.checkAll=true;
            }else{
                this.checkAll=false;
            }
        },
        //搜索
        search(){
            this.page=1;
            this.loadData();
            this.checkAll=false;
        },
        //导出数据
        exportData(){
            let arr=[];
            let obj=[{title:"Id",key:"Id"},{title:"姓名",key:"name"},{title:"身份证号",key:"idcard"},{title:"绑定手机",key:"phone"},{title:"性别",key:"sex"},{title:"年龄",key:"age"}]
            let itarr;
            this.examineeList.forEach((v,i)=>{
                this.Something.forEach((v1,i1)=>{
                    if(v.Id==v1) {
                        itarr={Id:v.Id,name:v.name,idcard:v.idcard,phone:v.phone,sex:v.sex==1?'男':'女',age:v.age}
                        arr.push(itarr);
                    }
                })
            })
            if(arr.length==0){
                this.$Message.error('未选择数据');
            }else{
                let title=[];
                this.columns4.forEach((v,i)=>{
                    if(v.title==undefined||i>6){
                        v.title='';
                    }else{
                        title.push(v.title)
                    }
                    
                });
                this.$refs.selection.exportCsv({
                    filename: '考生信息',
                    columns: obj,
                    data: arr
                });
            }
        }     
    }
};
</script>
<style scoped>
.examination-room-info{margin:20px 0;}
.examination-room-info span{margin-right:20px;}
.back-examinee-btn{margin-right:20px;}
.examinee-search-form{margin:20px 0;}
.examinee-search-table .ivu-table-wrapper{margin-bottom:20px;}
.examinee-search-table Button{margin-right:8px;}
.examinee-search-table .tablePage{float:right;}
</style>